<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<div id="app">
    {{msg}}==={{arr}}==={{obj}}
    <hr>
    <button @click="handel">点击</button>
    <ul>
        <li>第1个li</li>
        <li v-if="flag" class="li1">第2个li</li>
    </ul>
    <button @click="handel1">点击flag</button>





</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.min.js"></script>
<script>
    const vu = new Vue({
        el: "#app",
        data: {
            msg: 'hello vue',
            arr: [1, 2, 3, 4],
            obj: {
                age: 19
            },
            flag: false


        },
        methods: {
            handel() {
                //this.$set解决数据更改视图页面不更新的问题
                // this.$set(数据源数组, 索引号, 新的值)
                // this.$set(数据源对象, 属性名, 新的值)/解决在对象里面加了属性不更新的问题
                this.$set(this.arr, 1, 333)
                this.$set(this.obj, 'name', 'rose')


            },
            handel1() {
                this.flag = !this.flag
                    // let li1 = document.querySelector('.li1')
                    // console.log(li1); //获得是null,解决办法:$nextTick,从而获取dom元素
                    // this.$nextTick(() => {
                    //     let li1 = document.querySelector('.li1')
                    //     console.log(li1); //获得是null,解决办法:$nextTick

                // });
                setTimeout(() => {
                    let li1 = document.querySelector('.li1')
                    console.log(li1); //获得是null,解决办法:$nextTick

                }, 1500)
            }

        },
        computed: {

        }
    })
</script>






</body>

</html>